<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table'

import { ref } from 'vue'

import { Page } from '@vben/common-ui'

import { Button, Input, message, Switch } from 'ant-design-vue'
import dayjs from 'dayjs'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getGoodsTimeCategoryList, GoodsTimeCategoryEdit } from '#/api/goodsTimeCategory'

interface RowType {
  date: string
  id: number
  name: string
  parentId: null | number
  size: number
  type: string
}

const gridOptions: VxeGridProps<RowType> = {
  cellConfig: {},
  height: 'auto',
  columns: [
    { type: 'checkbox', width: 70 },
    { field: 'time_category_name', title: '分组名称', treeNode: true },
    { field: 'goods_no_code', title: '货号编码' },
    { field: 'scm_code', title: 'erp编码' },
    { field: 'erp_id', title: 'ERPID' },
    { field: 'level', title: '层级' },
    { title: '状态', field: 'status', width: 120, slots: { default: 'status' } },
    {
      field: 'update_time',
      title: '更新时间',
      formatter({ cellValue }) {
        return dayjs(cellValue * 1000).format('YYYY-MM-DD')
      },
    },
    {
      field: 'create_time',
      title: '创建时间',
      formatter({ cellValue }) {
        return dayjs(cellValue * 1000).format('YYYY-MM-DD')
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: async (_params) => {
        const { list } = await getGoodsTimeCategoryList({ quick_search: quick_search.value })
        return list
      },
    },
  },
  id: 'goodsTimeCategory',
  customConfig: {
    storage: true,
  },
  checkboxConfig: {
    // labelField: 'id',
    highlight: true,
    checkStrictly: true, // ← 加这个
  },
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    refresh: true,
    zoom: true,
  },
  treeConfig: {
    parentField: 'parent_id',
    rowField: 'id',
    // expandAll: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions })

const isAllExpanded = ref(false)
const toggleExpandAll = () => {
  isAllExpanded.value = !isAllExpanded.value
  gridApi.grid?.setAllTreeExpand(isAllExpanded.value)
}

/**
 *  快速查询查询
 */
const quick_search = ref()
function doSearch() {
  gridApi.query()
}

function changeSwitch(val: any, row: any) {
  GoodsTimeCategoryEdit({ status: val, id: row.id }).then((res) => {
    if (res.data.code === 1) {
      message.success(res.data.msg)
    } else {
      message.error(res.data.msg)
    }
  })
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-actions>
        <Button type="primary" @click="toggleExpandAll">
          {{ isAllExpanded ? '折叠全部' : '展开全部' }}
        </Button>
      </template>
      <template #toolbar-tools>
        <Input v-model:value="quick_search" allow-clear placeholder="通过分类编号，名称，代码模糊搜索" style="width: 300px; margin-right: 8px" @change="doSearch" />
      </template>
      <template #status="{ row }">
        <Switch v-model:checked="row.status" :un-checked-value="0" :checked-value="1" @change="(val) => changeSwitch(val, row)" />
      </template>
    </Grid>
  </Page>
</template>

<style scoped>
.custom-expand-btn {
  background-color: #52c41a; /* 绿色 */
  border-color: #52c41a;
  color: white;
}

.custom-expand-btn:hover {
  background-color: #73d13d;
  border-color: #73d13d;
}

.custom-collapse-btn {
  background-color: #faad14; /* 橙色 */
  border-color: #faad14;
  color: white;
}

.custom-collapse-btn:hover {
  background-color: #ffc53d;
  border-color: #ffc53d;
}
</style>
